<template>
	<h2>provide 与 inject</h2>
	<h3>当前的颜色:{{ color }}</h3>
	<button @click="color = 'red'">红色</button>
	<button @click="color = 'yellow'">黄色</button>
	<button @click="color = 'green'">绿色</button>
	<hr />
	<Son />
</template>

<script lang="ts">
import { defineComponent, provide, ref } from "vue"
import Son from "./components/Son.vue"

export default defineComponent({
	name: "App",
	components: {
		Son
	},
	setup(props) {
		const color = ref("red")
		provide("color", color)
		return {
			color
		}
	}
})
</script>

<style></style>
